// export default function main() {
//   return (
//     <div>
//       <h1>main</h1>
//       <p>Welcome to the main page!</p>
//     </div>
//   );
// }
import { connect } from 'react-redux';
import store from '../store';
import React, { PureComponent } from 'react';
import { increment } from '../store/features/counter';
class main extends PureComponent {
    // 移除 constructor 中冗余的 state 初始化（直接使用 props）
  // constructor() {
  //   super();
  //   this.state = {
  //     counter: store.getState().counter.value
  //   };
  // }
  // componentDidMount() {
  //   console.log('componentDidMount');
  //   const state = store.getState().counter
  //   store.subscribe(() => {
  //     this.setState({
  //       counter: state.counter
  //     })
  //   });
  // }
  add(num) {
    this.props.increment(num);
  }
  render() {
    const { counter,value } = this.props;
    console.log("🚀 ~ main ~ render ~ counter:", counter)
    return (
      <div>
        <h2>Counter</h2>
        <div className="main">
          {value}
        </div>
        <button onClick={()=>this.add(1)}>+1</button>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  console.log("🚀 ~ mapStateToProps ~ mapStateToPropsstate:", state)
  return {
    counter: state.counter.value,
  }
};

const mapDispatchToProps = (dispatch) => {
  return {
    increment: (value) => {
      dispatch(increment(value));
    }
  }
};

export default connect(mapStateToProps, mapDispatchToProps)(main)
